<template>
  <div class="slideBar-box">
    <el-menu
      :default-active="activeELitem"
      :router="true"
      :default-openeds="openArr">
      <el-submenu
        :index="groupindex + ''"
        :class="groupitem.title === 'noGroup'? 'side-bar-no-group':''"
        v-for="(groupitem, groupindex) in groupMenus"
        v-show="groupitem.group.length > 0"
        :key="groupindex">
        <template slot="title">
          <span>{{ groupitem.title }}</span>
        </template>
        <el-submenu
          :index="groupindex + '-' + childindex"
          v-show="groupitem.childs"
          v-for="(childitem, childindex) in groupitem.childs"
          :key="groupindex + '-' + childindex">
          <template slot="title">{{ childitem.title }}</template>
          <el-menu-item
            v-for="(menuItem, menuIndex) in childitem.group"
            :index="currentPath + '/' + menuItem.path"
            @click="addZhuGoTrack(currentPath + '/' + menuItem.path)"
            :key="menuIndex"
            v-show="childitem.group.length > 0">
            {{menuItem.meta && menuItem.meta.title ? menuItem.meta.title : 'no title'}}
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-for="(menuItem, menuIndex) in groupitem.group"
          @click="addZhuGoTrack(currentPath + '/' + menuItem.path)"
          :index="currentPath + '/' + menuItem.path"
          :key="menuIndex">
            {{menuItem.meta && menuItem.meta.title ? menuItem.meta.title : 'no title'}}
            <span v-if="unreadInfo && menuItem.name === 'pending'">{{(unreadInfo.toClaimSum !== undefined && unreadInfo.toClaimSum !== null)  ? unreadInfo.toClaimSum : ''}}</span>
            <span v-if="unreadInfo && menuItem.name === 'upcoming'">
              <span class="red">{{(unreadInfo.currentSlaTimeOutSum !== undefined && unreadInfo.currentSlaTimeOutSum !== null) ? unreadInfo.currentSlaTimeOutSum : ''}}</span>
              <span>{{(unreadInfo.toDoSum !== undefined && unreadInfo.toDoSum !== null) ? '/' + unreadInfo.toDoSum : ''}}</span>
            </span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { PermissionModule } from '@/store/modules/permission'
import { asyncRoutes } from '@/router'
@Component({
  name: 'Sidebar'
})
export default class NavIndex extends Vue {
  // @Prop() private openArr!: []
  @Prop({ default: () => ([]) }) private otherGroup!: any
  @Prop({ default: { app: { title: '' } } }) private groupSettings: any
  @Prop({ default: () => ({}) }) private unreadInfo: any
  @Prop({ default: () => ('') }) private activeItem: any
  private $route: any
  private $router: any
  private $store: any
  private primaryPath: string = ''
  private currentPath: string = ''
  private openArr: any = []
  private groupMenus: any = []

  private leaveFullPath: string = ''

  private defaultActive: string = ''

  // 选中的当前节点
  private activeELitem = ''

  @Watch('otherGroup', { immediate: true, deep: true })
  private otherGroupChange (val: any) {
    this.groupMenus = this.groupMenus.concat(this.otherGroup)
  }

  @Watch('activeItem', { immediate: true, deep: true })
  private activeItemChange (val: any) {
    if (this.$route.query.customRouter === 'business/index') {
      this.activeELitem = this.currentPath + val
    }
  }

  private mounted () {
    this.primaryPath = this.$route.matched[0].path
    this.currentPath = this.$route.matched[1].path
    if (this.$route.matched.length > 2) {
      this.activeELitem = this.defaultActive = this.$route.matched[2].path
    }
    this.openArr = this.getOpenArr(this.groupSettings, null)
    this.groupMenus = this._groupMenus()
  }

  public setMenu (arr) {
    this.$nextTick(() => {
      this.groupMenus.push(arr)
    })
  }

  get menus () {
    let menus: any = []
    PermissionModule.roleRoutes.forEach((item: any) => {
      if (item.path === this.primaryPath) {
        menus = item.children[0].children
      }
    })
    if (!this.defaultActive && this.currentPath && menus.length > 0) {
      this.defaultActive = this.currentPath + '/' + menus[0].path
      this.$router.push({ path: this.defaultActive })
    }
    return menus
  }

  /**
   * 根据路由group进行分类
   */
  private _groupMenus () {
    return this.getGroupMenus(this.groupSettings, this.menus)
  }

  /**
   * 递归获取分组
   */

  private getGroupMenus (groupSettings, menus) {
    const groupMenus: any = []
    Object.keys(groupSettings as object).some((key, index) => {
      const groupItem: any = {
        title: '',
        group: []
      }
      const group: any = []
      menus.forEach((menusitem) => {
        if (menusitem.meta && menusitem.meta.group && menusitem.meta.group === key) {
          group.push(menusitem)
        }
      })
      groupItem.title = groupSettings[key].title || '未配置title'
      groupItem.group = group
      if (groupSettings[key].groupSettings) {
        groupItem.childs = this.getGroupMenus(groupSettings[key].groupSettings, menus)
      }
      groupMenus.push(groupItem)
    })
    return groupMenus
  }

  private getOpenArr (groupSettings, pIndex) {
    const openArr: any = []
    let childArr: any = []
    Object.keys(groupSettings).forEach((item, index) => {
      let resultId = ''
      if (pIndex !== null) {
        resultId = pIndex + '-' + index
      } else {
        resultId = index + ''
      }
      if (groupSettings[item].groupSettings) {
        childArr = this.getOpenArr(groupSettings[item].groupSettings, resultId)
      }
      openArr.push(resultId)
    })
    return openArr.concat(childArr)
  }

  /**
   * 离开保留当前的路由实现
   */
  @Watch('$route')
  private routeChange (newRoute, oldRoute) {
    const oldPrimaryPath = oldRoute.matched[0].path
    const newPrimaryPath = newRoute.matched[0].path
    const currentPrimaryPath = newRoute.matched[1].path
    if (oldPrimaryPath === newPrimaryPath) {
      this.defaultActive = newRoute.matched[2].path
      return
    }
    if (newPrimaryPath !== oldPrimaryPath) {
      if (oldPrimaryPath === this.primaryPath) {
        this.leaveFullPath = oldRoute.fullPath
      }
      if (newPrimaryPath === this.primaryPath) {
        if (newRoute.fullPath === currentPrimaryPath) {
          this.$router.push(this.leaveFullPath)
        } else {
          this.$router.push(newRoute.fullPath)
          this.defaultActive = newRoute.path
        }
      }
    }
  }

  private addZhuGoTrack (item) {
    this.$emit('unReadInfo')
    // @ts-ignore 诸葛IO埋点
    this.$addZhuGeTrack(item)
  }
}
</script>
<style lang="stylus" scoped>
.slideBar-box
  font-size 14px
  width 150px
  height 100%
  color $fc-gray2
  font-weight bold
  box-sizing border-box
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
  border-radius 10px
  padding-top 8px
  overflow auto
  .router-link-active
    li
      color $c-main !important
      background-color #dddee0 !important
::-webkit-scrollbar-track-piece
  background-color transparent
  -webkit-border-radius 0
::-webkit-scrollbar-thumb
  background-color transparent
  border 0
  border-radius 0
::-webkit-scrollbar
  width 0
  height 0
.secondMenu
  padding-left 28px !important
</style>
<style lang="stylus">
.slideBar-box
  .el-menu
    background-color #fff
    border-right 0
  .el-menu__first
    font-weight bold
  .el-submenu
    .el-menu
      .el-menu-item
        font-size 12px !important
        color $fc-gray
        text-align left
        height 45px
        line-height 45px
        min-width 100%
        // padding-left 28px !important
        font-weight normal
      .el-menu-item.is-active
        color $c-main
        background #E5F3FD
      .el-menu-item:hover, .el-menu-item:focus
        color $c-main
        background #E5F3FD
    .el-submenu__title
      font-size 12px !important
      height 44px
      line-height 44px
      font-weight bold
      color #000
      span
        padding-right 20px
    .el-menu-item-group__title
      display none
  .thirdthMenu
    .el-submenu__title
      padding-left 28px !important
    .el-menu-item
      padding-left 42px !important
.side-bar-no-group
  .el-submenu__title
    display none
.red
  color: #FC6B5C;
</style>
